<template>
  <div class="commonPrescription-container">
    <el-dialog
      title="选择医嘱"
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
      v-if="dialogTableVisible"
    >
      <!-- <div class="top-title-container">
        <el-form>
          <el-form-item label="处方名称">
            <el-input v-model="presData.title"></el-input>
          </el-form-item>
          <el-form-item label="处方性质">
            <el-select v-model="presData.category" placeholder="请选择">
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button class="main-btn" size="small" type="primary" @click="searchClick"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div> -->
      <el-table
        border
        max-height="400px"
        :data="commonAdviceList"
        :row-key="getRowKey"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55">
        </el-table-column>
        <el-table-column label="医嘱名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <p>{{ scope.row.title }}</p>
          </template>
        </el-table-column>
        <el-table-column label="医嘱内容" show-overflow-tooltip>
          <template slot-scope="scope">
            <p>
              {{ scope.row.contents }}
            </p>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="presData.pager.number"
          :page-size="presData.pager.size"
          layout="total, prev, pager, next"
          :total="listTotal"
        >
        </el-pagination>
      </div>
      <div class="bottom-container">
        <el-button class="border-btn" size="small" @click="cancelSelect"
          >取消</el-button
        >
        <el-button
          class="main-btn"
          size="small"
          type="primary"
          @click="confrimSelect"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { medicalAdviceList } from "@/api/templates.js";

export default {
  data() {
    return {
      presData: {
        title: "",
        category: "",
        pager: {
          number: 1,
          size: 10,
        },
      },
      listTotal: 0,
      commonAdviceList: [], // 常用处方列表
      categoryOptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "cycf",
          label: "成药处方",
        },
        {
          value: "ypcf",
          label: "饮片处方",
        },
        {
          value: "sycf",
          label: "输液处方",
        },
      ],
      dialogTableVisible: false,
      multipleSelection: [],
    };
  },
  created() {
    // this.getCommonAdviceList(this.presData)
  },
  methods: {
    getRowKey(row) {
      return row.ID;
    },
    openCommonList() {
      this.dialogTableVisible = true;
      this.getCommonAdviceList(this.presData);
    },
    closeCommonList() {
      this.dialogTableVisible = false;
      this.multipleSelection = [];
    },
    cancelSelect() {
      this.dialogTableVisible = false;
      this.multipleSelection = [];
    },
    confrimSelect() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: "warning",
          message: "请先选择医嘱",
          duration: 1500,
        });
        return;
      }
      this.dialogTableVisible = false;
      this.$emit("selectAdviceList", this.multipleSelection);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getCommonAdviceList(this.presData);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.presData.pager.number = val;
      this.getCommonAdviceList(this.presData);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    searchClick() {
      this.getCommonAdviceList(this.presData);
    },
    getCommonAdviceList(datas) {
      medicalAdviceList(datas).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.commonAdviceList = res.data.data || [];
          this.listTotal = res.data.total || 0;
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/outpatient/modules/commonPrescription.scss";
</style>